<template>
  <div >
    <label v-for="option in options" :key="option.value" :style="labelStyle">
      <input
        :class="['nes-radio',dark==='true'?'is-dark':'' ]"
        type="radio"
        :name="name"
        :value="option.value"
        v-model="modelValueProxy"
        :disabled="option.disabled"
      />
      <span :style="textStyle">{{ option.label }}</span>
    </label>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  modelValue: { type: [String, Number, Boolean], default: '' },
  options: { type: Array, default: () => [] }, // [{label, value, disabled}]
  name: { type: String, default: 'pixel-radio' },
  size: { type: [String, Number], default: '18px' }, // 字体大小
  color: { type: String, default: '' }, // 文本颜色
  dark: { type: Boolean, default: false }, // 是否深色模式
  font: { type: String, default: 'Press Start 2P, zpix' }, // 像素风字体
})

const emit = defineEmits(['update:modelValue'])
const modelValueProxy = ref(props.modelValue)
watch(() => props.modelValue, v => modelValueProxy.value = v)
watch(modelValueProxy, v => emit('update:modelValue', v))

const textStyle = computed(() => {
  const style = {}
  style.fontFamily = props.font
  style.fontSize = typeof props.size === 'number' ? props.size + 'px' : props.size
  if (props.color) style.color = props.color
  return style
})
const labelStyle = computed(() => ({
  marginRight: '2em',
  alignItems: 'center',
  cursor: 'pointer',
}))
</script>

<style scoped>

</style> 